<template>
  <el-table v-bind="$attrs" @selection-change="handleSelectionChange" @row-click="rowClick">
    <el-table-column v-if="columns.index" type="index" align="center" width="60" />
    <el-table-column fixed='left' v-if="columns.selection" type="selection" align="center" width="60" />
    <el-table-column v-for="(tr, index) in columns.tr" :key="index" :prop="tr.prop" :label="tr.label" :fixed="tr.fixed" :width="tr.width || ''" :align="tr.align || 'center'" :show-overflow-tooltip="true">
      <template slot-scope="scope">
        <section v-if="tr.el === 'slot'">
          <slot :name="tr.prop" v-bind:row="scope.row"></slot>
        </section>
        <section v-if="tr.el === 'button'">
          <el-button v-for="(btn, btnIndex) in tr.btns" :key="btnIndex" :type="btn.type || 'primary'" :plain="btn.plain || false" :round="btn.round || false" :circle="btn.circle || false" :disabled="btn.disabled || false" :class="btn.class" :icon="btn.icon" @click="btn.func(scope.row)">
            {{btn.text}}
          </el-button>
        </section>
        <section v-if="tr.el === 'tag'">
          <el-tag v-for="(tag, tagIndex) in tr.tags" :key="tagIndex" :type="tag.format[scope.row[tag.key]].type">
            {{tag.format[scope.row[tag.key]].value}}
          </el-tag>
        </section>
        <section v-if="tr.el === 'switch'">
          <el-switch v-model="scope.row[tr.switch.key]" :active-color="tr.switch.activeColor || '#13ce66'" :inactive-color="tr.switch.inactiveColor || '#C0C4CC'" @change="tr.switch.func(scope.row,$event)" />
        </section>
        <section v-if="tr.el === 'link'">
          <el-button :type="tr.link.type || 'primary'" :plain="tr.link.plain || false" :disabled="tr.link.disabled || false" @click="tr.link.func(scope.row)">
            {{scope.row[tr.link.key]}}
          </el-button>
        </section>
        <section v-if="tr.el === 'icon'">
          <i :class="tr.icon.class" v-show="scope.row[tr.icon.key] == tr.icon.condition" :style="tr.icon.style" />
        </section>
        <section v-if="!tr.el">
          {{scope.row[tr.prop]}}
        </section>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "tableCom",
  props: {
    columns: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit("selection-change", val);
    },
    rowClick(Row, Event, Column) {
      const data = {
        row: Row,
        event: Event,
        column: Column
      };
      this.$emit("row-click", data);
    }
  }
};
</script>
